<script setup lang="ts">
import {reactive, ref} from "vue";
import {getHouseWorkListById, houseWorkType} from "../../api/servers.ts";
import {useRouter} from "vue-router";

const houseWorkData = ref<houseWorkType[]>(
    [] as houseWorkType[]
)

const router = useRouter();

const handleCel = (id: string) => {
  console.log(id);
}

const handleMark = (id: string) => {
  router.push({path: `userDetail/${id}`})
}
const getList = async (id: string) => {
  await getHouseWorkListById(id).then(res => houseWorkData.value = res.data)
}

getList("9c5c950d-5112-4c71-87bd-d18992f1769b");
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <h3>我的服务</h3>
      </div>
      <div class="query">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="按照服务类型进行查询">
            <el-input v-model="formInline.user" placeholder="输入服务类型" clearable/>
          </el-form-item>
          <el-form-item label="按照服务公司名称进行查询">
            <el-input v-model="formInline.user" placeholder="输入服务公司名称" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <el-table :data="houseWorkData" style="width: 100%">
      <el-table-column prop="company.name" label="服务公司" width="180"/>
      <el-table-column prop="server.name" label="服务类型"/>
      <el-table-column prop="address" label="订单地址"/>
      <el-table-column prop="serverTime" label="服务时间"/>
      <el-table-column prop="" label="operator" v-slot="{row}">
        <el-button type="primary" @click="() => handleMark(row.company.id)">结算</el-button>
        <el-button type="danger" @click="() => handleCel(row.id)">取消</el-button>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped>
.query {
  margin-top: 20px;
}
</style>